<template>
	<view class="content">
		 <view class="uni-flex uni-column">
			<view class="flex-item portrait" @click="goDetailPage(portrait.page)">
				<view class="portrait-image">
					<image :mode="portrait.mode" :src="portrait.src"></image>
				</view>
				<view class="portrait-name">
					<view class="portrait-name-title">
						<text>{{ portrait.title }}</text>
					</view>
					<view class="portrait-name-subtitle">
						<text>账号: {{ portrait.subtitle }}</text>
					</view>
				</view>
				<view class="portrait-icon">
					<text class="uni-icon">&#xe470;</text>
				</view>
			</view>
			
			<view class="flex-item uni-panel" v-for="(item, index) in panel.list" :key="item.id" @click="goDetailPage(item.page)">
				<view class="uni-panel-image">
					<image  :src="item.src"></image>
				</view>
				<view class="uni-panel-name">
					<text>{{ item.title }}</text>
				</view>
				<view class="uni-panel-icon">
					<text class="uni-icon">&#xe470;</text>
				</view>
			</view>
	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				portrait:{
					mode: "scaleToFill",
					src: "/static/imges/portrait_image.jpg",
					title: "Daft Punk",
					subtitle: "smile19970620",
					page: "information"
				},
				panel:{
					list:[
						{
							id:"about",
							src: "/static/imges/about.png",
							title: "关于",
							page:"about"
							
						},
						{
							id:"setting",
							src: "/static/imges/setting.png",
							title: "设置",
							page:"setting"
						}
					]
				}
			}
		},
		methods: {
			goDetailPage(e){ // 跳转页面
				if (typeof e === 'string') {
				    uni.navigateTo({
				        url: '/pages/' + e + '/' + e
				    })
				}
			}
		}
	}
</script>

<style>
	.flex-item{
		padding: 0 5%;
	}
	/* 头像*/
	.portrait{
		background-color: #FFFFFF;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		margin-bottom:20px;
		padding: 10% 5%;
	}
	.portrait .portrait-image{
		display: flex;
		margin-left: 5%;
		width: 20%;
		margin-left: 5%;
	}
	.portrait .portrait-image image{
		background-color: #F8F8F8;
		border-radius: 20%;
		width: 70px;
		height: 70px;
	}
	.portrait .portrait-name {
		width: 60%;
	}
	.portrait .portrait-name text{
		margin-left: 5%;
	}
	.portrait .portrait-name .portrait-name-title{
		font-size: 20px;
		letter-spacing: 1px;
		font-weight: bold;
		color: #000000;
	}
	.portrait .portrait-name .portrait-name-subtitle{
		font-size: 16px;
		font-weight: bold;
		color: #999999;
	}
	.portrait .portrait-icon{
		width: 20%;
	}
	.portrait .portrait-icon .uni-icon{
		float: right;
	}
	/* 列表项*/
	.uni-panel {
		background-color: #FFFFFF;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		margin-bottom: 5px;
		padding: 3% 5%;
	}
	.uni-panel .uni-panel-image{
		align-items: center;
		display: flex;
		margin-left: 5%;
		width: 20%;
	}
	.uni-panel .uni-panel-image image{
		width: 30px;
		height: 30px;
	}
	.uni-panel .uni-panel-name{
		width: 60%;
	}
	.uni-panel .uni-panel-icon{
		width: 20%;
	}
	.uni-panel .uni-panel-icon .uni-icon{
		float: right;
	}
</style>
